<template>
  <div>
    <el-card>
      <el-card>
        <div>
          <el-button type="primary" @click="addRef.isShow = true">添加信息</el-button>
          <el-button type="primary" @click="reset">刷新</el-button>
        </div>
      </el-card>
      <el-table :data="menuList" border stripe row-key="id">
        <el-table-column v-for="item in propList" :key="item.id" :label="item.label" :prop="item.prop" :index="item.id">
          <template #default="{ row }">
            <span v-if="item.prop === 'icon'">
              <!-- <svg-icon :icon-class="row[item.prop]" /> -->
              <!-- <el-icon class="is-loading"></el-icon> -->
              <Edit style="width: 1em; height: 1em; margin-right: 8px" />
            </span>
            <span v-else-if="item.prop === 'type'">
              {{ row.type === 'menu' ? '菜单' : '按钮' }}
            </span>
            <span v-else-if="item.prop === 'status'">
              <el-switch v-model="switchValue" inline-prompt active-text="是" inactive-text="否" />
            </span>
            <!-- <span v-else>{{ row[item.prop] }}</span> -->
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center" class="button">
          <template #default="{ row }">
            <el-button type="primary" icon="el-icon-edit" circle size="medium" v-if="row.type === 'menu'"
              @click="addChild(row)">添加子集</el-button>
            <el-button type="success" circle icon="el-icon-edit" size="medium" @click="editMenu(row.id)">编辑</el-button>
            <el-button circle type="danger" icon="el-icon-delete" size="medium" @click="delMenu(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <addForm ref="addRef" @updateList=" getMenu()" />
  </div>
</template>

<script setup>
import { onMounted, ref, computed, toRaw } from 'vue'
import { menuApi } from '../../../api/auth'
import { transListToTreeData } from '../../../utils/tree'
import addForm from './addForm.vue';
import { delMenuApi } from '../../../api/menus.js'
import { ElMessage } from "element-plus";
const menuList = ref([])
const addRef = ref()
const getMenu = async () => {
  let res = await menuApi()
  menuList.value = transListToTreeData(res.data, 0)
}
const reset = () => {
  getMenu()
}
const delMenu = async (id) => {
  await delMenuApi(id).then((res) => {
    ElMessage(res.msg)
    getMenu()
  })
}
const row = ref({ status: 1 });
const addChild = (data) => {
  const formData = toRaw(data)
  addRef.value.addChildData(formData)
}
const editMenu = (id) => {
  addRef.value.editReplyData(id)
}
const switchValue = computed({
  get() {
    return row.value.status === 1;
  },
  set(value) {
    row.value.status = value ? 1 : 0;
  }
});
const propList = [
  { id: 1, label: '名称', prop: 'title' },
  { id: 2, label: '路由地址', prop: 'path' },
  { id: 3, label: '图标', prop: 'icon' },
  { id: 4, label: '标识', prop: 'name' },
  { id: 5, label: '类型', prop: 'type' },
  { id: 6, label: '权重', prop: 'weight' },
  { id: 7, label: '状态', prop: 'status' },
]
onMounted(() => {
  getMenu()
})
</script>

<style scoped></style>